<template>
    <div class='right-container'>
        <HeaderStudent class="header" :headerList="headerList"></HeaderStudent>
        <div class="right-content white-color">
            <div class="content">
                <div class="row-class">
                    <div class="subject-class">
                        <img src="../../src/assets/img/welcome/star.png" alt="" class='star'>
                        <span>数学</span>
                    </div>
                    <div class="title-course">
                        <span>第三讲</span>
                        <span>奥数的秘密</span>
                        <span class='green-color'>课程回放</span>
                    </div>
                    <div class="className2-class">
                        <span class="className-title">班级名称:</span>
                        <span>奥数的秘密突击一班</span>
                    </div>
                    <div class="startTime class-time">
                        <i class="el-icon-date"></i>
                        <span class="span-margin"> 2019-11-09至2019-12-08</span>
                        <i class="el-icon-time"></i>
                        <span class="span-margin"> 12:30-13:30</span>
                        <img src="../../src/assets/img/welcome/greyPerson.png" alt="">
                        <span>讲师: </span>
                        <span class="margin-20"> 小王</span>
                        <img src="../../src/assets/img/welcome/greyPerson.png" alt="">
                        <span>助教: </span>
                        <span> 小王</span>
                    </div>
                    <div class="live-show">
                        <!-- <img src="../../src/assets/img/welcome/liveShow.png" alt=""> -->
                        <video width="100%" height="362" controls="controls">
                            <source src="https://baijiahao.baidu.com/s?id=1641378214731854082&wfr=content"
                                type="video/mp4" />
                            <!--                                <source src="movie.ogg" type="video/ogg" />-->
                            <!--                                <source src="movie.webm" type="video/webm" />-->
                            <!--                                <object data="movie.mp4" width="320" height="240">-->
                            <!--                                    <embed src="movie.swf" width="320" height="240" />-->
                            <!--                                </object>-->
                        </video>
                        <div class="grey-footer" ref="greyFooter">
                            <i class="el-icon-arrow-left" @click='clickLeft'></i>
                            <div class="ulParent" ref="ulParent">
                                <ul ref="ulContainer">
                                    <li v-for="(item, idx) in arr"
                                        :key="idx"
                                        :class="{'class-num': true, 'fir-class': idx === 0, activeColor: item.active}"
                                        @click="clickBtn(item, idx)">
                                        {{item.name}} </li>
                                </ul>
                            </div>
                            <i class="el-icon-arrow-right" @click='clickRight'></i>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'home',
    data() {
        return {
            active: 1,
            headerList: [{
                name: '在线课堂',
                path: '/studentMange'
            }, {
                name: '学小思教育',
                path: '/studentMange'
            }],
            openeds: ['5', '5-2'],
            arr: [{
                name: '第一讲',
                active: false
            },
            {
                name: '第二讲',
                active: false
            },
            {
                name: '第三讲',
                active: false
            },
            {
                name: '第四讲',
                active: false
            }
                // {name: '第五讲', active: false},
                // {name: '第六讲', active: false},
                // {name: '第七讲', active: false},
                // {name: '第八讲', active: false},
                // {name: '第九讲', active: false},
                // {name: '第十讲', active: false},
                // {name: '第十一讲', active: false},
                // {name: '第十二讲', active: false},
                // {name: '第十三讲', active: false},
                // {name: '第十四讲', active: false},
                // {name: '第十五讲', active: false},
                // {name: '第十六讲', active: false},
            ],
            courseArry: [{
                subject: '数学',
                className: '奥数的秘密突击一班',
                'status': '',
                startTime: '2019-11-09 12:00至2019-12-08 13:00',
                teacher: '王占云',
                help: '王占云',
                courses: [{
                    'name1': '第三讲',
                    'name2': '奥数的秘密',
                    'btns': ['进入教室', '课程回放', '习题'],
                    'color': 'blue',
                    'status': '未开始'

                }, {
                    'name1': '第二讲',
                    'name2': '奥数的秘密',
                    'btns': ['进入教室', '课程回放', '习题'],
                    'color': 'green',
                    'status': '未开始'

                }, {
                    'name1': '第一讲',
                    'name2': '奥数的秘密',
                    'btns': ['进入教室', '课程回放', '习题'],
                    'color': 'orange',
                    'status': '未开始'

                }]
            },
            {
                subject: '语文',
                className: '奥数的秘密突击一班',
                startTime: '2019-11-09 12:00至2019-12-08 13:00',
                teacher: '王占云',
                help: '王占云',
                'status': '未购买',
                courses: [{
                    'name1': '第三讲',
                    'name2': '奥数的秘密',
                    'btns': ['进入教室', '课程回放', '习题'],
                    'color': 'blue',
                    'status': '未开始'

                }, {
                    'name1': '第二讲',
                    'name2': '奥数的秘密',
                    'btns': ['进入教室', '课程回放', '习题'],
                    'color': 'green',
                    'status': '未开始'

                }, {
                    'name1': '第二讲',
                    'name2': '奥数的秘密',
                    'btns': ['进入教室', '课程回放', '习题'],
                    'color': 'orange',
                    'status': '未开始'

                }]
            }
            ],
            courseArry2: [{
                subject: '数学',
                className: '奥数的秘密突击一班',
                startTime: '2019-11-09 12:00至2019-12-08 13:00',
                teacher: '王占云',
                help: '王占云',
                courses: [{
                    'name1': '第三讲',
                    'name2': '奥数的秘密',
                    'btns': ['进入教室', '课程回放', '习题'],
                    'color': 'blue',
                    'status': '未开始'

                }, {
                    'name1': '第二讲',
                    'name2': '奥数的秘密',
                    'btns': ['进入教室', '课程回放', '习题'],
                    'color': 'green',
                    'status': '未开始'

                }, {
                    'name1': '第一讲',
                    'name2': '奥数的秘密',
                    'btns': ['进入教室', '课程回放', '习题'],
                    'color': 'orange',
                    'status': '未开始'

                }]
            }]
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        },
        changTab(index) {
            this.active = index
        },
        jumpPage(it) {
            if (it === '进入教室') {
                this.$router.push({
                    path: '/liveCourse' //跳转的路径
                })
            }
            if (it === '课程回放') {
                this.changTab(2)
            }
        },
        clickRight() {
            let iLeft = this.$refs.ulParent.offsetLeft - 72
            console.log('iLeft', iLeft)
            let wrapWidth = this.$refs.greyFooter.offsetWidth
            let utlWidth = this.$refs.ulParent.offsetWidth
            let maxLeft = wrapWidth - utlWidth
            if (iLeft <= maxLeft) {
                iLeft = maxLeft
            }
            this.$refs.ulContainer.style.left = iLeft + 'px'
        },
        clickLeft() {
            let iLeft = this.$refs.ulParent.offsetLeft + 72
            iLeft >= 0 && (iLeft = 0)
            this.$refs.ulParent.style.left = iLeft + 'px'
        },
        clickBtn(it, index) {
            // eslint-disable-next-line no-return-assign
            this.arr.map(it => it.active = false)
            this.arr[index].active = !this.arr[index].active
        }
    },
    components: {}
}

</script>
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    html,
    body {
        height: 100%
    }

    .right-content {
        div.btn-container {
            padding-top: 18px;
            width: calc(100% - 588px);
            .flex(row, space-between, center, nowrap);

            margin: auto;
            height: 44px;

            >div {
                width: 97px;
                height: 30px;
                border-radius: 3px;
                border: 1px solid rgba(96, 98, 102, 0.34);
                text-align: center;
                line-height: 30px;
                font-size: 14px;
                font-family: PingFang-SC-Regular !important;
                font-weight: 400;
                color: rgba(96, 98, 102, 1);
                cursor: pointer
            }

            .active-color {
                // #53CC90
                background: #53CC90;
                border: solid 1px #53CC90;
                color: #fff;
                position: relative;

                &:after {
                    position: absolute;
                    content: '';
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    border-top: 5px solid #53CC90;
                    top: 30px;
                    left: 44px;

                }
            }
        }

        .content {
            width: calc(100% - 52px);
            margin: auto;
            height: 100%;

            .row-class {
                margin-top: 25px;
                /*height: calc((100% - 106px) / 2);*/
            }

            .subject-class {
                margin-bottom: 14px;
                padding-top: 30px;

                img {
                    margin-right: 6px;
                    position: relative;
                    top: 2px;
                }

                span {
                    font-family: PingFang-SC-Regular !important;
                    font-weight: 400;
                    color: rgba(78, 84, 108, 1);
                }
            }

            .className-class {
                font-size: 16px;
                font-family: PingFang-SC-Regular !important;
                font-weight: 400;
                color: rgba(72, 87, 106, 1);
                margin-bottom: 10px;

                .status-btn {
                    background: rgba(255, 171, 43, 1);
                    border-radius: 2px;
                    padding: 2px 8px;
                    color: #FFFFFF;
                    margin-left: 12px;
                    font-size: 12px;
                    font-family: PingFang-SC-Regular !important;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                }
            }

            .startTime {
                font-size: 14px;
                font-family: PingFang-SC-Regular !important;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                margin-bottom: 15px;
                position: relative;

                img {
                    margin-left: 24px;
                    margin-right: 4px;
                    height: 20px;
                    width: 20px;
                    position: relative;
                    top: 6px;
                }

                .more {
                    position: absolute;
                    right: 0px;
                    top: 5px;
                    font-size: 14px;
                    font-family: PingFang-SC-Regular !important;
                    font-weight: 400;
                    color: rgba(96, 98, 102, 1);
                    cursor: pointer;
                }
            }

            .class-name,
            .class-time {
                margin-bottom: 10px;
                font-size: 14px;
                font-family: PingFang-SC-Regular;
                font-weight: 400;
                color: rgba(78, 84, 108, 1)
            }

            .class-time {
                color: rgba(153, 153, 153, 1);
                margin-bottom: 10px;
                font-size: 14px;
                font-family: PingFang-SC-Regular !important;
                font-weight: 400;

                img {
                    width: 18px;
                    height: 18px;
                    position: relative;
                    top: 5px;
                    left: 5px;
                }

                .span-margin {
                    margin-right: 40px;
                }

                .margin-20 {
                    margin-right: 20px;
                }
            }

            .title-course {
                margin-top: -10px;
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                font-family: PingFang-SC-Regular !important;
                font-weight: 500;
                color: rgba(78, 84, 108, 1);

                span {
                    margin-right: 12px
                }
            }

            .img-container {
                .flex(row, space-between, center, nowrap);

                /*height: calc(100% - 170px);*/
                >div {
                    width: calc((100% - 40px)/3);
                    border-radius: 4px;
                    /*height: 144px;*/
                    position: relative;
                }

                .operate-btn {
                    .flex(row, space-between, center, nowrap);
                    border-radius: 0px 0px 4px 4px;
                    border: 1px solid rgba(151, 151, 151, 0.4191);
                    height: 44px;

                    .btn-class {
                        width: calc(100% / 3);
                        text-align: center;
                        font-size: 14px;
                        font-family: PingFang-SC-Regular !important;
                        font-weight: 400;
                        color: rgba(96, 98, 102, 1);
                        cursor: pointer;
                        border-right: solid 1px rgba(151, 151, 151, 1);

                        &:last-child {
                            border-right: none;
                        }

                        &:hover {
                            color: rgba(90, 119, 245, 1);
                        }
                    }
                }

                .img {
                    height: 130px;
                    border-radius: 4px 4px 0px 0px;
                    background-size: cover;
                    /*height: calc(100% - 170px);*/
                }

                .course-status {
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    font-size: 12px;
                    font-family: PingFang-SC-Regular !important;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    width: 48px;
                    height: 31px;
                    background: rgba(243, 111, 127, 1);
                    border-radius: 0px 4px 0px 3px;
                    opacity: 0.9475;
                    line-height: 31px;
                    text-align: center;
                }

                .blue-img {
                    background: url("../../src/assets/img/welcome/studentBlue.png") center no-repeat;
                }

                .green-img {
                    background: url("../../src/assets/img/welcome/studentGreen.png") center no-repeat;
                }

                .orange-img {
                    background: url("../../src/assets/img/welcome/studentOrange.png") center no-repeat;
                }

                .title-num,
                .course-content {
                    font-size: 22px;
                    font-family: PingFang-SC-Regular;
                    font-weight: 500;
                    color: rgba(255, 255, 255, 1);
                    margin-left: 38px;
                }

                .title-num {
                    padding-top: 30px;
                    margin-bottom: 14px;
                }

                .course-content {
                    font-size: 17px;
                }
            }

        }

        .live-show {
            width: calc(100% - 330px);

            .grey-footer {
                margin-top: -4px;
                height: 55px;
                width: 100%;
                line-height: 55px;
                background: #2E2E36;
                position: relative;

                overflow: hidden;

                .activeColor {
                    background: rgba(255, 171, 43, 1);
                }

                .ulParent {
                    width: 90%;
                    height: 55px;
                    overflow: hidden;
                    position: relative;
                    left: 5%;

                }

                ul {
                    position: absolute;
                    display: flex;
                    // flex: 1
                }

                li {
                    list-style: none;
                    float: left;
                    display: inline;
                    width: 58px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    background: rgba(32, 32, 38, 1);
                    border-radius: 4px;
                    margin-right: 14px;
                    /*padding: 0px 34px;*/
                    color: #fff;
                    cursor: pointer;
                    font-size: 14px;
                    font-family: PingFang-SC-Regular;
                    font-weight: 400;
                }

                // .class-num {
                //     background: rgba(32, 32, 38, 1);
                //     border-radius: 4px;
                //     // padding: 7px 14px;
                //     font-size: 8px;
                //     font-family: PingFang-SC;
                //     font-weight: 400;
                //     color: rgba(254, 254, 254, 1);
                //     margin: 0px 12px;
                //     cursor: pointer;
                // }
                .el-icon-arrow-left {
                    position: absolute;
                    left: 10px;
                    top: 22px;
                    color: #FFFFFF;
                    cursor: pointer;
                }

                .el-icon-arrow-right {
                    position: absolute;
                    right: 10px;
                    top: 22px;
                    color: #FFFFFF;
                    cursor: pointer;
                }
            }
        }

        .title-course {
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
            color: rgba(72, 87, 106, 1);

            span {
                margin-right: 12px
            }

            .green-color {
                width: 81px;
                height: 24px;
                background: rgba(171, 240, 206, 0.34);
                ;
                border-radius: 2px;
                border: 1px solid rgba(83, 204, 144, 0.36);
                font-size: 14px;
                font-family: PingFang-SC-Regular;
                font-weight: 400;
                padding: 1px 12px;
                cursor: pointer;
                color: rgba(83, 204, 144, 1);
            }

        }

        .className2-class {
            font-size: 14px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            margin-bottom: 8px;
        }

        .className-title,
        .startTime-title {
            margin-right: 5px;
        }

    }

</style>
<style lang="less">
    .left-container {
        ul {
            background-color: #22345E
        }
    }

    .btn-group {
        >div {
            text-align: center
        }
    }

    .date-line {
        text-align: center !important
    }

    .star {
        width: 15px;
        height: 15px;
        background: rgba(255, 171, 43, 1);
        border-radius: 1px;
    }

    // 下拉选
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #55a8fd !important;
        color: #ffffff !important;
    }

    .el-select-dropdown__list {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        font-size: 14px !important;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;
    }

    .popper__arrow {
        display: none !important;
    }

    // 日历
    .el-picker-panel__body {
        font-family: PingFang-SC-Regular !important;
    }

    .bgColor {
        background-color: #53CC90 !important;
    }

    .ulParent {
        left: 5% !important
    }

    @import url('../../src/assets/less/override-element-ui.less');

</style>
